<html>
  <head>
    <title>Bubble Chart</title>
    <script type="text/javascript" src="../protovis-r3.2.js"></script>
    <script type="text/javascript" src="luckysemiosis.js"></script>
    <style type="text/css">

body {
  margin: 0;
}

    </style>
  </head>
  <body>
    <script type="text/javascript+protovis">

/* Produce a flat hierarchy of the Flare classes. */
var classes = pv.nodes(pv.flatten(flare).leaf(Number).array());
classes.slice(1).forEach(function(d) {
  d.nodeName = "flare." + d.nodeValue.keys.join(".");
  var i = d.nodeName.lastIndexOf(".");
  d.className = d.nodeName.substring(i + 1);
  d.packageName = d.nodeName.substring(0, i);
  d.nodeValue = d.nodeValue.value;
});

/* For pretty number formatting. */
var format = pv.Format.number();

var vis = new pv.Panel()
    .width(document.body.clientWidth)
    .height(document.body.clientHeight);

vis.add(pv.Layout.Pack)
    .top(-50)
    .bottom(-50)
    .nodes(classes)
    .size(function(d) d.nodeValue)
    .spacing(0)
    .order(null)
  .node.add(pv.Dot)
    .fillStyle(pv.Colors.category20().by(function(d) d.packageName))
    .strokeStyle(function() this.fillStyle().darker())
    .visible(function(d) d.parentNode)
    .title(function(d) d.nodeName + ": " + format(d.nodeValue))
  .anchor("center").add(pv.Label)
    .text(function(d) d.className.substring(0, Math.sqrt(d.nodeValue) >> 4));

vis.render();

    </script>
  </body>
</html>
